<template>
  <div class="home-customer">
    <div class="home-customer-title">
      客服概况
      <el-date-picker
        style="width: 250px;flex-grow: 0;"
        v-model="val"
        type="daterange"
        format="YYYY-MM-DD"
        valueFormat="YYYY-MM-DD"
        @change="onChange"
      />
    </div>

    <div class="home-customer-list">
      <div class="home-customer-cell is-blue">
        <div class="home-customer-cell-title">销售额(万)</div>
        <EChart class="home-customer-chart" :options="salesRevenue" />
      </div>

      <div class="home-customer-cell is-yellow">
        <div class="home-customer-cell-title">平均接待量(人)</div>
        <EChart class="home-customer-chart" :options="receptionVolume" />
      </div>
      
      <div class="home-customer-cell is-blue">
        <div class="home-customer-cell-title">平均转化率(%)</div>
        <EChart class="home-customer-chart" :options="conversionRate" />
      </div>

      <div class="home-customer-cell is-yellow">
        <div class="home-customer-cell-title">平均响应时间(秒)</div>
        <EChart class="home-customer-chart" :options="responseTime" />
      </div>

      <div class="home-customer-cell is-blue">
        <div class="home-customer-cell-title">平均回复率(%)</div>
        <EChart class="home-customer-chart" :options="responseRate" />
      </div>

      <div class="home-customer-cell is-yellow">
        <div class="home-customer-cell-title">平均问答比(%)</div>
        <EChart class="home-customer-chart" :options="qARatio" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getCusSer } from '../api'
import EChart from '@/components/chart/EChart.vue'
import { graphic } from 'echarts'
import dayjs from 'dayjs'

const val = ref([dayjs().subtract(10, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
const list = ref<any>({})
getCusSer({ startDate: val.value[0], endDate: val.value[1] })
  .then(res => {
    list.value = res || {}
  })
const onChange = () => {
  getCusSer({ startDate: val.value[0], endDate: val.value[1] })
    .then(res => {
      list.value = res || {}
    })
}

// 销售额(万)
const salesRevenue = computed(() => {
  const l = list.value.salesRevenue || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

// 转化率
const conversionRate = computed(() => {
  const l = list.value.conversionRate || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

// 平均回复率(%)
const responseRate = computed(() => {
  const l = list.value.responseRate || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

// 平均接待量(人)
const receptionVolume = computed(() => {
  const l = list.value.receptionVolume || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

// 平均响应时间(秒)
const responseTime = computed(() => {
  const l = list.value.responseTime || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

// 问答比
const qARatio = computed(() => {
  const l = list.value.qARatio || []
  return getOptions(l.map(obj => {
    const keys = Object.keys(obj)
    const key = keys[0]
    return {
      label: key,
      value: obj[key]
    }
  }))
})

function getOptions(data) {
  return {
    grid: {
      top: '50PX',
      right: '20PX',
      left: '40PX',
      bottom: '40px'
    },
    xAxis: [{
      type: 'category',
      color: '#ADAEB0',
      data: data.map(i => i.label),
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#ADAEB0',
        textStyle: {
          fontSize: 12
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      axisLabel: {
        color: '#ADAEB0',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      }
    }],
    series: [
      {
        name: '新增客户',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        data: data.map(i => i.value),
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(9, 77, 178, .5)'
            }, {
                offset: 0.8,
                color: 'rgba(9, 77, 178, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#094DB2',
            borderColor: '#094DB2',
            borderWidth: 12
          }
        }
      }
    ]
  }
}
</script>

<style scoped lang="scss">
.home-customer {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 25px;
  box-sizing: border-box;
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  &-cell {
    width: calc(50% - 7px);
    height: 172px;
    border-radius: 8px;
    position: relative;
    margin-top: 16px;
    &:nth-of-type(2n) {
      margin-left: 14px;
    }
    &.is-blue {
      background: rgba(230, 236, 255, .5);
    }
    &.is-yellow {
      background: rgba(252, 244, 239, .72);
    }
  }
  &-chart {
    width: 100%;
    height: 100%;
  }

  &-cell-title {
    position: absolute;
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 14px;
    color: #414964;
    top: 12px;
    left: 20px;
  }
}
</style>
